<!--
 * @Description: Description
 * @Author: Kerwin
 * @Date: 2024-03-25 18:09:57
 * @LastEditTime: 2024-03-25 18:22:46
 * @LastEditors:  Please set LastEditors
-->
<!-- eslint-disable no-console -->
<!-- eslint-disable no-console -->
<!--
 * @Description: Description
 * @Author: Kerwin
 * @Date: 2023-07-01 16:22:48
 * @LastEditTime: 2024-03-25 18:05:45
 * @LastEditors:  Please set LastEditors
-->
<template>
    <view class="c_container">
        <u-popup mode="center" v-model="show" :border-radius="'20'">
            <view class="c_main">
                <view class="tit">添加员工</view>
                <view class="inpt">
                    <u-input v-model="phone" type="number" :maxlength="11" border  placeholder="请输入员工账号（手机号）"/>
                </view>
                <u-button type="primary" @click="confirm" ripple :custom-style="{
                    background: '#FF6C18'
                }">确认</u-button>
            </view>
        </u-popup>
    </view>
</template>
  
<script setup lang="ts">
import { ref, reactive, watch } from 'vue';
import { useUserStore } from '@/store'
import { baseApi, moneyApi } from '@/api';
import { dynamic_enum_type } from '@/api/enum';
import { isMobile } from "@/utils/common.ts"

const emit = defineEmits(['onConfirm'])
const userStore = useUserStore()
const props = withDefaults(
    defineProps<{
        isBack?: boolean
    }>(),
    {
        isBack: true,
    }
)
const show = ref(false)
const open = () => {
    show.value = true
}
const phone = ref()
const confirm = () => {
    if(!isMobile(phone.value)) {
        uni.showToast({
            icon: 'none',
            title: '请输入正确的手机号！',
        })
        return
    }
    emit('onConfirm', {
        phone: phone.value,
    })
    phone.value = ''
    show.value = false
}
defineExpose({ open })
</script>
  
<style lang="scss" scoped>
.c_container {
    .c_main {
        padding: 60rpx;
        width: 500rpx;
        .tit {
            font-size: 40rpx;
            text-align: center;
            font-weight: bold;
            margin-bottom: 30rpx;
        }

        .desc {
            margin-bottom: 50rpx;
        }

        .inpt {
            display: flex;
            justify-content: center;
            margin-bottom: 50rpx;
        }
    }

}
</style>
  